<template>
    <div class="mtrade">
        <div class="nav">
            <div class="back" @click.stop="$router.back()">
                <i class="iconfont icon-fanhui"></i>
            </div>
            <h1 v-if="movie">{{movie.nm}}</h1>
        </div>
        <div class="main" v-if="movie">
            <div class="cover">
                <div class="bg" :style="`backgroundImage:url(${imgUrl})`"></div>
                <div class="img">
                    <img :src="imgUrl"/>
                </div>
                <div class="describe">
                    <p class="movie-name">{{movie.nm}}</p>
                    <div class="enm">
                        <span>{{movie.enm}}</span>
                    </div>
                    <div class="score">
                        <p v-if="!movie.sc">暂无评分</p>
                        <p v-else>{{movie.sc}}&nbsp;<span>({{movie.snum|fixsnum}}万人评)</span></p>
                    </div>
                    <div class="cat">
                        <span>{{movie.cat}}</span>
                    </div>
                    <div class="dur">
                        <span>{{movie.src}}</span>/<span>{{movie.dur}}分钟</span>
                    </div>
                    <div class="onlineDate">
                        <span>{{movie.pubDesc}}</span>
                    </div>
                </div>
                <div class="about">
                    <router-link :to="`/moviedetial/${movie.id}`">
                        <i class="iconfont icon-xiangyoujiantou-1"></i>
                    </router-link>
                </div>
            </div>

            <div class="select" ref="select">
                <van-tabs swipe-threshold="3" title-active-color="#f03d37" title-inactive-color="#666" line-width="88" @click="changeDate" v-model="active">
                    <van-tab v-for="(item,index) in dates" :title="item.date|filDate" :key="index">
                        <van-dropdown-menu>
                            <van-dropdown-item :title="areaName" ref="item1">
                            <van-tabs v-model="choose">
                                <van-tab title="商区">
                                <!-- <van-tree-select
                                    :items="items"
                                    :active-id.sync="activeId"
                                    :main-active-index.sync="activeIndex"
                                    @click-nav="clnav" @click-item="clitem"
                                /> -->
                                </van-tab>
                                <van-tab title="地铁站">
                                <!-- <van-tree-select
                                    :items="items2"
                                    :active-id.sync="activeId"
                                    :main-active-index.sync="activeIndex"
                                    @click-nav="clnav" @click-item="clitem"
                                /> -->
                                </van-tab>
                            </van-tabs>
                            </van-dropdown-item>

                            <van-dropdown-item :title="brandName" v-model="value1" :options="option1"/>

                            <van-dropdown-item :title="serName" ref="item3">
                            <!-- <van-cell-group title="特色功能" :border="false">
                                <ul class="service">
                                <li v-for="item in service" :key="item.id" :class="[item.id==serviceId?'choose':'']" @click.stop="changeService(item.id)">
                                    {{item.name}}
                                </li>
                                </ul>
                            </van-cell-group>
                            <van-cell-group title="特殊厅" :border="false">
                                <ul class="halltype">
                                <li v-for="item in hallTypes" :key="item.id" :class="[item.id==hallType?'choose':'']" @click.stop="changeHalltype(item.id)">
                                    {{item.name}}
                                </li>
                                </ul>
                            </van-cell-group>
                            <div class="serBtn">
                                <van-button type="default" size="large" round @click.stop="reset">
                                重置
                                </van-button>
                                <van-button type="danger" size="large" round @click.stop="onConfirm">
                                确认
                                </van-button>
                            </div> -->
                            </van-dropdown-item>
                        </van-dropdown-menu>
                        <ul>
                            <li v-for="item in cinemaList" :key="item.id">
                                <router-link :to="`/cinemadetial/${item.id}`">
                                    <select-cinema :item="item"></select-cinema>
                                </router-link>
                            </li>
                        </ul>
                    </van-tab>
                </van-tabs>
            </div>
            <loading-animation v-if="isload" :showText="true"></loading-animation>
        </div>

        <loading-animation v-if="isload && !movie" :showText="true"></loading-animation>

        <div class="gotop" v-if="isshow" @click.stop="gotop">
            <i class="iconfont icon-top"></i>
        </div>

        <div class="locations" v-if="locationData">
        <i class="iconfont icon-location-arrow"></i>{{locationData.district}}{{locationData.detail}}<i class="refalsh iconfont icon-shuaxin" @click.stop="refalsh"></i>
      </div>
      <div class="locations" v-else>
        <i class="iconfont icon-location-arrow"></i>定位失败，请稍后重试<i class="refalsh iconfont icon-shuaxin" @click.stop="refalsh"></i>
      </div>
    </div>
</template>

<script>
import {mapGetters} from 'vuex'
import _ from 'lodash';
import SelectCinema from '../components/SelectCinema.vue';
import LoadingAnimation from '@/components/LoadingAnimation.vue';

export default {
    props:['movieId'],
    data(){
        return {
            movie:null,
            dates:[],
            active:0,
            page:0,
            cinemaList:[],
            choose:0,
            areaName:'全城',
            brandName:'品牌',
            serName:"筛选",
            value1: -1,
            option1: [],
            isload:true,
            isshow:false,
        }
    },
    created(){
        this.getmovie();
        this.getshowDay();
        // this.getselectItem();
    },
     mounted(){
        window.addEventListener("scroll",this.scrollbar);
    },
    beforeDestroy(){
        window.removeEventListener("scroll",this.scrollbar);
    },
    methods:{
        async getmovie(){
            let re=await this.axios.get('https://apis.netstart.cn/maoyan/movie/intro?movieid='+this.movieId);
            this.isload=false;
            this.movie=re.data.data.movie;
        },
        async getshowDay(){
            let re=await this.axios.get(`movie/showdays?movieId=${this.movieId}&cityId=${this.cityid}`);
            this.dates=re.data.data.dates;
            // this.getselectItem();
            this.getselectCinema();
        },
        async getselectItem(){
            let date=this.dates[this.active].date;
            let re=await this.axios.get(`movie/select/items?movieid=${this.movieId}&cityId=${this.cityid}&showDate=${date}`);
            console.log(re);
        },
        async getselectCinema(){
            if(this.locationData){
                let re=await this.axios.get(`movie/select/cinemas?limit=20&offset=${this.page*20}&client=iphone&channelId=4&showDate=${this.dates[this.active].date}&movieId=1446115&sort=distance&cityId=20&lat=${this.locationData.lat}&lng=${this.locationData.lng}`);
                let arr=re.data.data.cinemas;
                let a=_.uniqWith(arr, _.isEqual);
                this.isload=false;
                this.cinemaList.push(...a);
            }else{
                let re=await this.axios.get(`movie/select/cinemas?limit=20&offset=${this.page*20}&client=iphone&channelId=4&showDate=${this.dates[this.active].date}&movieId=1446115&sort=distance&cityId=20`);
                let arr=re.data.data.cinemas;
                let a=_.uniqWith(arr, _.isEqual);
                this.isload=false;
                this.cinemaList.push(...a);
            }
        },
        changeDate(){
            // this.getselectItem();
            this.cinemaList=[];
            this.page=0;
            this.isload=true;
            this.getselectCinema();
        },
        scrollbar:_.throttle(function(){
            if(this.$refs.select && this.cinemaList.length>0){
                let el=document.documentElement||document.body;
                let top=el.scrollTop+el.clientHeight;
                let a=el.scrollTop;
                let b=el.clientHeight;
                if(a>b){
                this.isshow=true;
                }else{
                this.isshow=false;
                }
                let moretop=0;
                moretop=this.$refs.select.offsetTop+this.$refs.select.offsetHeight;
                if(top+1>=moretop){
                    this.isload=true;
                    this.loadmore();
                }else{
                    return;
                }
            }else{
                return;
            }
        },300),
        loadmore(){
            if(this.page*20<200){
                this.page++;
                this.getselectCinema();
            }else{
                return;
            }
        },
        gotop(){
            document.documentElement.scrollTop=document.body.scrollTop=0;
        },
    },
    computed:{
        ...mapGetters(['cityid','locationData']),
        imgUrl(){
            if(this.movie.img){
                let str=this.movie.img.replace('w.h','110.150');
                return str;
            }else{
                return "";
            }
        }
    },
    filters:{
        fixsnum(snum){
            let a=(snum/10000).toFixed(1);
            return a;
        },
        filDate(text){
            let now=new Date();
            let date=new Date(text);
            let m=date.getMonth()+1;
            m=m>9?m:"0"+m;
            let d=date.getDate();
            d=d>9?d:"0"+d;
            let week=['周日','周一','周二','周三','周四','周五','周六'];
            if(date.getDay()-now.getDay()==0){
                return '今天'+m+'月'+d+'日';
            }else if(date.getDay()-now.getDay()==1){
                return '明天'+m+'月'+d+'日';
            }else if(date.getDay()-now.getDay()==2){
                return '后天'+m+'月'+d+'日';
            }else{
                return week[date.getDay()]+m+'月'+d+'日';
            }
        },
    },
    components: {
        SelectCinema,
        LoadingAnimation,
    },
}
</script>

<style lang="less" scoped>
.nav{
    background-color: #e54847;
    padding: 6px;
    height: 38px;
    line-height: 38px;
    color: #fff;
    text-align: center;
    font-size: 18px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;

    .back{
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);

        i{
            font-size: 20px;
        }
    }
}
.cover{
    height: 150px;
    padding: 19px 10px 19px 15px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;

    .bg{
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: -1;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50%;
        transform: scale(1.5);
        filter: blur(30px);

        &::after{
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background-color: rgba(0, 0, 0, 0.5);
        }
    }

    .img{
        width: 110px;
        height: 150px;
        margin-right: 10px;

        img{
            display: block;
            width: 100%;
        }
    }

    .describe{
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 12px;
        color: rgba(255,255,255,.7);
        line-height: 18px;

        .movie-name{
            color: #fff;
            font-size: 20px;
            font-weight: 600;
            line-height: 25px;
        }

        .movie-name,.enm,.score,.cat,.dur,.onlineDate{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .cat,.dur,.onlineDate{
            margin-top: 5px;
        }

        .enm{
            margin: 5px 0 8px;
        }

        .score{
            font-size: 18px;
            font-weight: 700;
            color: #fc0;
            line-height: 25px;

            span{
                font-size: 12px;
                color: rgba(255,255,255,.7);
            }
        }
    }

    .about{
        margin-left: 5px;
        i{
            font-size: 19px;
            color: rgba(255,255,255,.7);
        }
    }
}

.gotop{
  position: fixed;
  color: #999;
  bottom: 20%;
  right: 25px;
  background-color: #ddd;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  opacity: .7;
  i{
    font-size: 25px;
  }
}

.locations{
    position: fixed;
    width: 80%;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    background-color: hsla(0,0%,93.7%,.9);
    color: #666;
    font-size: 13px;
    padding: 0 30px 0 15px;
    line-height: 35px;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    i{
        font-size: 12px;
        padding-right: 5px;

        &.refalsh{
        font-size: 14px;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        }
    }
}
</style>